<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .ad {
        position: fixed;
        right: 0;
        bottom: -230px;
        width: 230px;
        height: 120px;
        background-image: url(images/ad.jpg);
        /* transform: translateY(100%); */
      }

      .ad span {
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
        height: 18px;
        background-image: url(images/h.jpg);
        cursor: pointer;
      }
    </style>

    <script src="./jquery.min.js"></script>
    <script>
      $(function () {
        $('.ad')
          .animate({ bottom: 0 }, 500)
          .animate({ bottom: '-230px' }, 500, function () {
            // 动画做完后，要归位
            $('.ad').css({ bottom: 0, opacity: 0 })
          })
          .animate({ opacity: 1 })

        // slideDown 是显示    slideUp是隐藏
        // $('.ad').slideDown(500, function () {
        //   $('.ad').slideUp(500, function () {
        //     $('.ad').fadeIn(500)
        //   })
        // })
        // 不用放到回调中，动画会排队（jQuery内部做的处理）（给同一个元素做动画时：会自动排队）
        // $('.ad')
        //   .slideDown(500)
        //   .slideUp()
        //   .fadeIn()
        //   .children('span')
        //   .on('click', function () {
        //     // this // 是span
        //     $(this).parent().hide()
        //   })
      })
    </script>
  </head>
  <body>
    <!--整个广告-->
    <div class="ad">
      <!--关闭按钮-->
      <span></span>
    </div>
  </body>
</html>
